<template>
  <el-dialog
      v-model="showDialog"
      :title="dialogTitle"
      :draggable="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      @close="handleClose(formItemRef)"
      @opened="handleOpened"
      @closed="handleClosed(formItemRef)"
  >
    <el-form
        :model="formItem"
        ref="formItemRef"
        :rules="formItemRules"
        label-width="120px"
    >
      <el-form-item label="模型标识" prop="modalKey">
        <el-input v-model="formItem.modalKey" type="text"/>
      </el-form-item>
      <el-form-item label="模型名称" prop="modalName">
        <el-input v-model="formItem.modalName" type="text"/>
      </el-form-item>
      <el-form-item label="模型类型" prop="modalType">
        <common-dict-select v-model="formItem.modalType" :dict-key="AI_MODAL_TYPE"></common-dict-select>
      </el-form-item>
      <el-form-item label="官网地址" prop="modalUrl">
        <el-input v-model="formItem.modalUrl" type="textarea"/>
      </el-form-item>
      <el-form-item label="apiKey" prop="modalApiKey"
                    v-if="dialogType === DIALOG_ADD"
      >
        <el-input v-model="formItem.modalApiKey" type="textarea"/>
      </el-form-item>
      <el-form-item label="说明" prop="introduce">
        <el-input v-model="formItem.introduce" type="textarea"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button type="primary" @click="confirm(formItemRef)" :loading="confirmLoading">确认</el-button>
      <el-button type="danger" @click="handleClose(formItemRef)">取消</el-button>
    </template>

  </el-dialog>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import type {FormInstance, FormRules} from "element-plus";
import {DIALOG_ADD, DIALOG_EDIT} from "@/constants/common-constant.ts";
import {elMessageTip, warningMessageTip} from "@/utils/tip-utils.ts";
import {RESPONSE_CODE_SUCCESS} from "@/config/common-config.ts";
import {getOneAiConfigReq, saveAiConfigItemReq} from "@/api/ai/ai.ts";
import CommonDictSelect from "@/components/common/CommonDictSelect.vue";
import {AI_MODAL_TYPE} from "@/constants/dict-constants.ts";

const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  dialogTitle: {
    type: String,
    default: ''
  },
  dialogType: {
    type: String,
    default: ''
  },
  relationId: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['handleClosed', 'handleClose'])
const showDialog = ref(props.showDialog)
watch(() => props.showDialog, (val:boolean) => {
  showDialog.value = val
})

interface FormItem {
  id: string;
  modalKey: string;
  modalName: string;
  modalType: string;
  modalApiKey: string;
  modalUrl: string;
  introduce: string;
}

const formItem = reactive<FormItem>({
  id: '',
  modalKey: '',
  modalName: '',
  modalType: '',
  modalApiKey: '',
  modalUrl: '',
  introduce: ''
})

const formItemRef = ref<FormInstance>()

const formItemRules = reactive<FormRules<FormItem>>({
  modalKey: [
    {required: true, message: '请输入模型标识', trigger: 'blur'},
  ],
  modalName: [
    {required: true, message: '请输入模型名称', trigger: 'blur'},
  ],
  modalType: [
    {required: true, message: '请选择模型类型', trigger: 'blur'},
  ],
  modalUrl: [
    {required: true, message: '请输入官网地址', trigger: 'blur'},
  ],
  modalApiKey: [
    {required: true, message: '请输入apiKey', trigger: 'blur'},
  ]
})

const confirmLoading = ref<boolean>(false)
const confirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return

  await formEl.validate(async (valid, fields) => {
    if (!valid){
      warningMessageTip("请填写完整信息")
      return
    } else {
      commonConfirm(formEl).then()
    }
  })
}

const commonConfirm = async (formEl: FormInstance | undefined) => {
  confirmLoading.value = true
  const params = {
    id: props.relationId,
    modalKey: formItem.modalKey,
    modalName: formItem.modalName,
    modalType: formItem.modalType,
    modalApiKey: formItem.modalApiKey,
    modalUrl: formItem.modalUrl,
    introduce: formItem.introduce,
  }
  const res: any = await saveAiConfigItemReq(params)
  elMessageTip(res.tipType, res.message)
  confirmLoading.value = false
  if (res.code === RESPONSE_CODE_SUCCESS) {
    handleClosed(formEl)
  }
}

const handleClose = (formEl: FormInstance | undefined) => {
  reset(formEl)
  emit('handleClose', false)

}

const handleClosed = (formEl: FormInstance | undefined) => {
  reset(formEl)
  emit('handleClosed', false)

}

const handleOpened = () => {
  if (props.dialogType === DIALOG_EDIT) {
    initFormInfo().then()
  }
}

const initFormInfo = async () => {
  const params = {
    id: props.relationId
  }
  const res: any = await getOneAiConfigReq(params)
  if (res.code === 200) {
    const data = res.data
    formItem.id = data.id
    formItem.modalKey = data.modalKey
    formItem.modalName = data.modalName
    formItem.modalType = data.modalType
    formItem.modalUrl = data.modalUrl
    formItem.introduce = data.introduce
  }
}

const reset = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<style scoped>

</style>